<template>
  <el-form-item
    v-if="!!item.resourceTypeShow ? item.resourceTypeShow.includes(editResouceForm['resourceType']):true"
    :key="item.key"
    :prop="item.key"
    :label="`${item.name}`">
    <el-input
      v-if="(item.type === 0 || item.type === 3) && item.key !== 'internalContact'"
      v-model="editResouceForm[item.key]"
      :name="item.key"
      :disabled="item.isDisabled"
      :maxlength="item.maxlength || ''"
      :placeholder="item.placeholder"
      :type="item.type === 3 ?'number':'text'" />
    <el-select
      v-else-if="item.type === 1 && item.key !== 'internalContact'"
      v-model="editResouceForm[item.key]"
      :name="item.key"
      filterable
      popper-class="global-select-down"
      @change="handelSelectData($event, item)">
      <el-option
        v-for="select in item.selectData"
        :key="select.id"
        :label="select.value"
        :value="select.id" />
    </el-select>
    <!-- 账号运营人或内部联系人（下拉选择用户） -->
    <el-select
      v-loadmore="loadmore"
      v-else-if="item.key === 'internalContact' || item.key === 'accountOperation'"
      v-model="editResouceForm[item.key]"
      :name="item.key"
      :multiple="item.key === 'accountOperation'"
      :filter-method="filterData"
      class="user-select"
      filterable
      collapse-tags
      clearable
      @change="selectUser"
      @clear="clear"
    >
      <el-option
        v-for="(select, index) in defaultUserList"
        :key="select.id + 'id' + index"
        :label="select.userName"
        :value="select.id" />
      <el-option
        v-for="(select, index) in selectUserData"
        :key="select.id + 'select' + index"
        :label="select.userName"
        :value="select.id"
        style="display:none;"
      />
      <el-option
        v-for="(select, index) in userList.items"
        :key="index"
        :label="select.userName"
        :value="select.id" />
      <div v-if="userLoading" class="loading-container"><i class="el-icon-loading"/></div>
    </el-select>
    <!-- 运营模式 -->
    <el-cascader
      v-if="item.key === 'operateMode' && item.type === 4"
      v-model="editResouceForm[item.key]"
      :options="item.selectData"
      clearable
      filterable
    />
    <div v-if="item.key === 'resourceLink'" class="tip">平台为微信和微信视频号时链接无需填写</div>
  </el-form-item>
</template>
<script>
export default {
  name: 'Select',
  props: {
    item: {
      type: Object,
      required: true
    },
    userLoading: {
      type: Boolean,
      default: false
    },
    editResouceForm: {
      type: Object,
      required: true
    },
    userList: {
      type: Object | Array,
      required: true
    },
    defaultUserList: {
      type: Object | Array,
      required: true
    }
  },
  data() {
    return {
      selectUserData: []
    };
  },
  methods: {
    handelSelectData(value, item) {
      this.$emit('handelSelectData', { value, item });
    },
    selectUser(value) {
      const userList = this.userList.items;
      this.selectUserData = [];
      if (value && value.length > 0) {
        userList.forEach(i => {
          if (value.includes(i.id)) {
            this.selectUserData.push(i);
          }
        });
        this.selectUserData.filter(i => {
          return value.includes(i.id);
        });
      } else {
        this.selectUserData = [];
      }
    },
    filterData(val) {
      this.$emit('filterData', val);
    },
    clear(val) {
      this.$emit('getUser');
    },
    loadmore() {
      this.$emit('loadmore');
    }
  }
};
</script>
<style lang="scss" scoped>
.loading-container {
  width: 100%;
  text-align: center;
  i {
    color: #999;
  }
}
.tip {
  font-size:14px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(153,153,153,1);
  line-height:14px;
  margin-top: 10px;
}
</style>
